<template>
	<view class="info-container">
		<!-- 基本信息表单 -->
		<u-form :model="userForm" ref="userForm" :rules="userRules" label-width="80">
			<view class="form-header">
				<view class="avatar-wrapper" @click="uploadAvatar">
					<image class="avatar" :src="userForm.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
					<text class="upload-text">点击上传头像</text>
				</view>
			</view>

			<u-form-item label="用户名称" prop="userName" required>
				<u-input v-model="userForm.userName" placeholder="请输入用户名称" />
			</u-form-item>
			
			<u-form-item label="手机号码" prop="phonenumber" required>
				<u-input v-model="userForm.phonenumber" placeholder="请输入手机号码" />
			</u-form-item>
			
			<u-form-item label="邮箱" prop="email" required>
				<u-input v-model="userForm.email" placeholder="请输入邮箱" />
			</u-form-item>

			<u-form-item label="性别">
				<u-radio-group v-model="userForm.sex">
					<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in sexOptions" :key="index" :label="item.label" :name="item.value">
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>

		<view class="btn-group">
			<u-button type="primary" @click="submitUserInfo">保存</u-button>
			<u-button @click="showPwdPopup = true">修改密码</u-button>
		</view>

		<!-- 修改密码弹窗 -->
		<u-popup v-model="showPwdPopup" mode="center" width="600rpx">
			<view class="pwd-popup">
				<view class="popup-title">修改密码</view>
				<u-form :model="pwdForm" ref="pwdForm" :rules="pwdRules" label-width="160">
					<u-form-item label="原密码" prop="oldPassword" required>
						<u-input v-model="pwdForm.oldPassword" type="password" placeholder="请输入原密码" />
					</u-form-item>
					
					<u-form-item label="新密码" prop="newPassword" required>
						<u-input v-model="pwdForm.newPassword" type="password" placeholder="请输入新密码" />
					</u-form-item>
					
					<u-form-item label="确认密码" prop="confirmPassword" required>
						<u-input v-model="pwdForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
					</u-form-item>
				</u-form>
				
				<view class="popup-btns">
					<u-button type="primary" @click="submitChangPassword">确定</u-button>
					<u-button @click="showPwdPopup = false">取消</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showPwdPopup: false,
			
			// 用户信息表单
			userForm: {
				userName: '',
				phonenumber: '',
				email: '',
				sex: '1',
				avatar: ''
			},
			
			// 修改密码表单
			pwdForm: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			
			// 性别选项
			sexOptions: [
				{label: '男', value: '1'},
				{label: '女', value: '0'}
			],
			
			// 用户信息验证规则
			userRules: {
				userName: [{
					required: true,
					message: '请输入用户名称'
				}],
				phonenumber: [{
						required: true,
						message: '请输入手机号码'  
					}, {
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value)
						},
						message: '手机号码格式不正确'
					}],
				email: [{
					required: true,
					message: '请输入邮箱'
				}, {
					type: 'email',
					message: '邮箱格式不正确'
				}]
			},
			
			// 密码验证规则
			pwdRules: {
				oldPassword: [{
					required: true,
					message: '请输入原密码'
				}],
				newPassword: [{
					required: true,
					message: '请输入新密码'
				}, {
					min: 6,
					message: '密码不能小于6个字符'
				}, {
					max: 20,
					message: '密码不能大于20个字符'
				}],
				confirmPassword: [{
					required: true,
					message: '请再次输入新密码'
				}, {
					validator: (rule, value, callback) => {
						return value === this.pwdForm.newPassword
					},
					message: '两次密码输入不一致'
				}]
			}
		}
	},
	
	onLoad() {
		// 获取用户信息
		this.getUserInfo()
	},
	
	methods: {
		// 获取用户信息
		getUserInfo() {
			uni.$u.http.get('/system/user/profile').then(res => {
				this.userForm = res.data
			})
		},
		
		// 上传头像
		uploadAvatar() {
			uni.chooseImage({
				count: 1,
				success: (chooseImageRes) => {
					const tempFilePaths = chooseImageRes.tempFilePaths
					uni.uploadFile({
						url: '/system/user/profile/avatar',
						filePath: tempFilePaths[0],
						name: 'avatarfile',
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data)
							if(res.code === 200) {
								this.userForm.avatar = res.imgUrl
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								})
							}
						}
					})
				}
			})
		},
		
		// 提交用户信息
		submitUserInfo() {
			this.$refs.userForm.validate().then(valid => {
				if(valid) {
					uni.$u.http.post('/system/user/profile/update', this.userForm).then(res => {
						if(res.code === 200) {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						}
					})
				}
			})
		},
		
		// 提交修改密码
		submitChangPassword() {
			this.$refs.pwdForm.validate().then(valid => {
				if(valid) {
					uni.$u.http.post('/system/user/profile/resetPwd', this.pwdForm).then(res => {
						if(res.code === 200) {
							uni.showToast({
								title: '修改成功',
								icon: 'success'
							})
							this.showPwdPopup = false
							// 清空密码表单
							this.pwdForm = {
								oldPassword: '',
								newPassword: '',
								confirmPassword: ''
							}
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.info-container {
	min-height: 100vh;
	background: #f8f8f8;
	padding: 30rpx;
}

.form-header {
	display: flex;
	justify-content: center;
	margin-bottom: 40rpx;
	
	.avatar-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		overflow: hidden;
		
		.avatar {
			width: 100%;
			height: 100%;
		}
		
		.upload-text {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(0,0,0,0.5);
			color: #fff;
			font-size: 20rpx;
			text-align: center;
			padding: 4rpx 0;
		}
	}
}

.btn-group {
	margin-top: 50rpx;
	display: flex;
	justify-content: center;
	gap: 30rpx;
}

.pwd-popup {
	background: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	
	.popup-title {
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}
	
	.popup-btns {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		gap: 30rpx;
	}
}
</style>